<template>
	<view>
		<view class="kkmmkxjnr"></view>
		<view class="pr">
			<view class="kkmmknxerr pt70">
				<view class="kkmmknnxweer">
					<image src="../../static/img/chengjiu/xunzhang.png" mode="widthFix" class="jjhbjjsdr cz"></image>
					已获得3枚勋章
				</view>
			</view>
			<view class=" pd">
				<view class="bgff kkmxeertt parentwwer cen">
					<view class="kkmmjnnxee" v-for="sd in jnkjjhsd">
						<image :src="'../../static/img/chengjiu/gl/'+sd.icona" class="kjnmxeeert cz" mode="widthFix" v-if="sd.type==0"></image>
						<image :src="'../../static/img/chengjiu/ah/'+sd.iconb" class="kjnmxeeert cz" mode="widthFix" v-if="sd.type==1"></image>
						<view class="fz28 z3 mt20">
							{{sd.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kkkmnnxeer cen" v-if="ispup" @tap="ispup=false">
			<image src="../../static/img/chengjiu/chengjiu.png" class="jhnjhsd cz" mode="widthFix"></image>
			<view class="fz48 cf mt200">
				走马上任
			</view>
			<view class="mt30 cf fz30">
				行程报告里程数达10KM
			</view>
			<view class="fz28 z9 mt20">
				当前进度5/10
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				ispup:true,
				jnkjjhsd:[
					{
						text:'走马上任',
						type:0, //0高亮 1黑暗
						icona:'dsfsdfa_a.png',
						iconb:'dsfsdfb_a.png',
					},{
						text:'一代宗师',
						type:0,
						icona:'dsfsdfa_b.png',
						iconb:'dsfsdfb_b.png',
					},{
						text:'威震车界',
						type:0,
						icona:'dsfsdfa_c.png',
						iconb:'dsfsdfb_c.png',
					},{
						text:'江湖传说',
						type:0,
						icona:'dsfsdfa_d.png',
						iconb:'dsfsdfb_d.png',
					},{
						text:'轻车熟路',
						type:0,
						icona:'dsfsdfa_e.png',
						iconb:'dsfsdfb_e.png',
					},{
						text:'社交达人',
						type:0,
						icona:'dsfsdfa_f.png',
						iconb:'dsfsdfb_f.png',
					},{
						text:'人车合一',
						type:1,
						icona:'dsfsdfa_g.png',
						iconb:'dsfsdfb_g.png',
					},{
						text:'功成名就',
						type:1,
						icona:'dsfsdfa_h.png',
						iconb:'dsfsdfb_h.png',
					},{
						text:'技惊四座',
						type:1,
						icona:'dsfsdfa_i.png',
						iconb:'dsfsdfb_i.png',
					}
				]
			}
		},
		components: {},
		methods: {},
		mounted() {}
	}
</script>
<style scoped>
	.kkmmkxjnr {
		background-color: #E8E8E8;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.kkmmknxerr {
		height: 366upx;
		background-color: #191D29;
	}

	.jjhbjjsdr {
		width: 46upx;
	}

	.kkmmknnxweer {
		width: 338upx;
		height: 72upx;
		line-height: 72upx;
		background-color: #353C51;
		font-size: 28upx;
		color: #E5C7B7;
		border-radius: 36upx;
		margin: auto;
		text-align: center;

	}

	.kkmxeertt {
		min-height: 400upx;
		margin-top: -130upx;
		border-radius: 12upx;
	}

	.parentwwer {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 100upx;
		padding-top: 90upx;
		padding-bottom: 90upx;
	}
	.kjnmxeeert{
		width: 134upx;
	}
	.kkkmnnxeer{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.8);
		z-index: 1000;
	}
	.jhnjhsd{
		width: 394upx;
		margin-top: 400upx;
	}
</style>
